$(function(){
    // 游客量同比分析 数据
    var selectDate = ['2018年6月01日', '2019年6月01日', '2020年6月01日']
    var selectData = [56859, 58147, 55716]
    // 节假日客流 数据
    var holidayData1=[8,24,30,28,16,10,25]
    var holidayData2=[6,20,26,24,8,12,20]
    var holidayData3=[0,0,6,20,12,16,24]

    // 游客量同比分析
    function myChart2() {
        var myChart = echarts.init(document.getElementById('flow-2'));

        option = {
            grid: {
                top: '16%',
                left: '1%',
                right: '1%',
                bottom: '8%',
                containLabel: true,
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'line'
                }
            },
            legend: {
                itemGap: 50,
                data: ['游客月数据' ],
                textStyle: {
                    color: '#f9f9f9',
                    borderColor: '#fff'
                },
            },
            xAxis: [{
                type: 'category',
                boundaryGap: true,
                axisLine: { //坐标轴轴线相关设置。数学上的x轴
                    show: true,
                    lineStyle: {
                        color: 'rgba(255,255,255,.3)'
                    },
                },
                axisLabel: { //坐标轴刻度标签的相关设置
                    textStyle: {
                        color: 'rgba(255,255,255,.6)',
                        margin: 15,
                    },
                },
                axisTick: {
                    show: false,
                },
                data:selectDate ,
            }],
            yAxis: [{
                type: 'value',
                min: 0,
                // max: 140,
                name:"(人次)",
                nameTextStyle:{
                    color:'#fff'
                },
                splitNumber: 7,
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: '#0a3256'
                    }
                },
                axisLine: {
                    show: false,
                },
                axisLabel: {
                    margin: 20,
                    textStyle: {
                        color: 'rgba(255,255,255,.6)',

                    },
                },
                axisTick: {
                    show: false,
                },
            }],
            series: [{
                type: 'line',
                // smooth: true, //是否平滑曲线显示
                // 			symbol:'circle',  // 默认是空心圆（中间是白色的），改成实心圆
                showAllSymbol: true,
                symbol: 'circle',
                symbolSize: 6,
                smooth: true,
                // lineStyle: {
                //     normal: {
                //         color:  chartColor[0], // 线条颜色
                //     },
                // },
                label: {
                    show: true,
                    position: 'top',
                    textStyle: {
                        color: '#fff',
                    }
                },
                itemStyle: {
                    normal: {
                        color: chartColor[0],

                    }
                },
                areaStyle: { //区域填充样式
                    normal: {
                        //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: 'rgba(0,154,120,1)'
                        },
                            {
                                offset: 1,
                                color: 'rgba(0,0,0, 0)'
                            }
                        ], false),
                        shadowColor: 'rgba(53,142,215, 0.9)', //阴影颜色
                        shadowBlur: 20 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
                    }
                },
                data:selectData,
            }]
        };
        myChart.setOption(option);
    }
    function myChart3() {
        var myChart = echarts.init(document.getElementById('flow-3'));
        var fontColor = chartColor[0];
        let thisData= [65253, 55971, 52062, 53885, 54600, 56576, 68816]
        var lastData = [62253, 52878, 45145, 52486,51161, 53398, 66060]
        var legendData = ['今年预测','去年同期']
        option ={
            grid: {
                left: '5%',
                right: '10%',
                top:'20%',
                bottom: '15%',
                containLabel: true
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },

            legend: {
                show:true,
                right:'10%',
                top:'20',
                icon: 'stack',
                itemWidth:10,
                itemHeight:10,
                textStyle:{
                    color:'#fff'
                },
                data:legendData
            },
            xAxis : [
                {
                    type : 'category',
                    boundaryGap : false,
                    axisLabel:{
                        color: fontColor
                    },
                    axisLine:{
                        show:true,
                        lineStyle:{
                            color:'#397cbc'
                        }
                    },
                    axisTick:{
                        show:false,
                    },
                    splitLine:{
                        show:true,
                        lineStyle:{
                            color:'#195384'
                        }
                    },
                    data : ['6-01', '6-02', '6-03', '6-04', '6-05', '6-06', '6-07']
                }
            ],
            yAxis : {
                type : 'value',
                min:0,
                name:'(人次)',
                nameTextStyle:{
                    color:"#fff"
                },
                axisLabel : {
                    formatter: '{value}',
                    textStyle:{
                        color:'#2ad1d2'
                    }
                },
                axisLine:{
                    lineStyle:{
                        color:'#27b4c2'
                    }
                },
                axisTick:{
                    show:false,
                },
                splitLine:{
                    show:true,
                    lineStyle:{
                        color:'#11366e'
                    }
                }
            },
            series : [
                {
                    name:legendData[0],
                    type:'line',
                    symbol:'circle',
                    symbolSize: 8,
                    smooth: true,
                    itemStyle: {
                        normal: {
                            color:'#0092f6',
                            lineStyle: {
                                color: "#0092f6",
                                width:1
                            },
                            areaStyle: {
                                //color: '#94C9EC'
                                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                                    offset: 0,
                                    color: 'rgba(7,44,90,0.3)'
                                }, {
                                    offset: 1,
                                    color: 'rgba(0,146,246,0.9)'
                                }]),
                            }
                        }
                    },
                    markPoint:{
                        itemStyle:{
                            normal:{
                                color:'red'
                            }
                        }
                    },
                    data: thisData
                },
                {
                    name:legendData[1],
                    type:'line',
                    symbol:'circle',
                    symbolSize: 8,
                    smooth: true,
                    itemStyle: {
                        normal: {
                            color:'#00d4c7',
                            lineStyle: {
                                color: "#00d4c7",
                                width:1
                            },
                            areaStyle: {
                                //color: '#94C9EC'
                                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                                    offset: 0,
                                    color: 'rgba(7,44,90,0.3)'
                                }, {
                                    offset: 1,
                                    color: 'rgba(0,212,199,0.9)'
                                }]),
                            }
                        }
                    },
                    data:lastData
                },
            ]
        };
        myChart.setOption(option);
    }
    // 节假日客流
    function myChart4() {
        var myChart = echarts.init(document.getElementById('flow-4'));
        option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            legend: {
                data: ['2018', '2019', '2020'],
                align: 'right',
                right: 10,
                textStyle: {
                    color: "#fff"
                },
                itemWidth: 10,
                itemHeight: 10,
                itemGap: 35
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [{
                type: 'category',
                data: ['元旦',
                    '春节',
                    '清明',
                    '端午',
                    '劳动',
                    '中秋',
                    '国庆'
                ],
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: "#063374",
                        width: 1,
                        type: "solid"
                    }
                },
                axisTick: {
                    show: false,
                },
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: "#00c7ff",
                    }
                },
            }],
            yAxis: [{
                name:'(万人)',
                type: 'value',
                min:0,
                max:50,
                splitNumber:7,
                axisLabel: {
                    formatter: '{value}'
                },
                axisTick: {
                    show: false,
                },
                axisLine: {
                    show: false,
                    lineStyle: {
                        color: "#00c7ff",
                        width: 1,
                        type: "solid"
                    },
                },
                splitLine: {
                    show:false,
                    lineStyle: {
                        color: "#063374",
                    }
                }
            }],
            series: [{
                name: '2018',
                type: 'bar',
                data: holidayData1,
                barWidth: 10, //柱子宽度
                barGap: 1, //柱子之间间距
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: 'rgba(0,228,255,1)'
                        }, {
                            offset: 1,
                            color: 'rgba(0,228,255,0)'
                        }]),
                        opacity: 1,
                    }
                }
            }, {
                name: '2019',
                type: 'bar',
                data: holidayData2,
                barWidth: 10,
                barGap: 1,
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: 'rgba(83,252,179,1)'
                        }, {
                            offset: 1,
                            color: 'rgba(83,252,179,0)'
                        }]),
                        opacity: 1,
                    }
                }
            }, {
                name: '2020',
                type: 'bar',
                data: holidayData3,
                barWidth: 10,
                barGap: 1,
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: 'rgba(255,89,89,1)'
                        }, {
                            offset: 1,
                            color: 'rgba(255,89,89,0)'
                        }]),
                        opacity: 1,
                    }
                }
            }]
        };
        myChart.setOption(option);
    }
    myChart2()
    myChart3()
    myChart4()
    // 游客量同比分析  年月日ab栏点击事件
    $('#dateTab>a').click(function(){
        let index=$(this).index()
        $(this).addClass('active').siblings('a').removeClass('active')
        $(this).parents('.content-title').siblings('.content-left-main').find('.select-date-box').eq(index).removeClass('hot-hd')
        $(this).parents('.content-title').siblings('.content-left-main').find('.select-date-box').eq(index).siblings('.select-date-box').addClass('hot-hd')
        if(index==0){
            selectDate = ['2018年6月01日', '2019年6月01日', '2020年6月01日']
            selectData = [56859, 58147, 55716]
            myChart2()
        }
        if(index==1){
            selectDate = ['2018年5月', '2019年5月', '2020年5月']
            selectData = [656025, 687092, 574431]
            myChart2()
        }
        if(index==2){
            selectDate = ['2018年', '2019年', '2020年']
            selectData = [1932596, 2050659, 2020556]
            myChart2()
        }

    })
    // 数字
    $('.numberStyle').leoTextAnimate({
        delay:1000, //延时出现时间
        autorun: true, //是否自动运行
        fixed: [',', ':', '.'], //
        start: '0'
    });
    //选择日
    laydate.render({
        elem: '#selectDate1', //指定元素
        theme: '#37B866',
        range: true,
        trigger: 'click',
        min: -10,
        max: 0
    });
     //选择月
     laydate.render({
        elem: '#selectMonth1', //指定元素
        theme: '#37B866',
        type: 'month',
         range: true,
         trigger: 'click',
    });
     //选择年
     laydate.render({
        elem: '#selectYear1', //指定元素
        theme: '#37B866',
        type: 'year',
         range: true,
         trigger: 'click',
    });
})
